<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[#include "/WEB-INF/pages/common/taglibs.ftl"]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Insert title here</title>
	<meta name="menu" content="AdminMenu"/>
	<meta name="heading" content="heading"/>
	
	<link rel="stylesheet" href="[@c.url value='/js/plugins/jquery-fileupload/css/jquery.fileupload-ui.css'/]">
	<link rel="stylesheet" href="[@c.url value='/js/plugins/jquery-fileupload/css/bootstrap.min.css'/]">
	<link rel="stylesheet" href="[@c.url value='/js/plugins/jquery-fileupload/css/bootstrap-image-gallery.min.css'/]">
	<link rel="stylesheet" href="[@c.url value='/js/plugins/jquery-fileupload/css/bootstrap-responsive.min.css'/]">
	
	<link rel="stylesheet" href="[@c.url value='/js/plugins/jquery-jcrop/jquery.Jcrop.min.css'/]">
	<!-- The localization script
	<script src="[@c.url value='/js/plugins/jquery-fileupload/js/locale.js'/]"></script> -->
	
	<!--图片剪切-->
	<script src="[@c.url value='/js/plugins/jquery-jcrop/jquery.Jcrop.min.js'/]"></script>
	<style type="text/css">
		#articleList table {
			width:100%;
		}
		#articleList table  th {
			width:101px;
			text-align:right;
			font-weight:normal;
		}
		#articleList table  td {
			
		}
		
		#kcfinder_div {
		    display: none;
		    position: absolute;
		    width: 670px;
		    height: 400px;
		    background: #e0dfde;
		    border: 2px solid #3687e2;
		    border-radius: 6px;
		    -moz-border-radius: 6px;
		    -webkit-border-radius: 6px;
		    padding: 1px;
		    z-index: 1999;
		}
		
	</style>
	
	<script type="text/javascript">
	
	$(function() {
		
		//剪切图片的全局设置
		var jcrop = {
			base:'${request.contextPath}',
			proview: {},
			size:{width:640, height:480},	//默认图片大小
			thumb:{width:120, height:90},	//默认缩略图大小
			corrd:{x:0, y:0, w:0, h:0},		//默认坐标和size
			url:'',
			preview:'#preview',
			view:'#titleImageReview',
			auto:true,
			init:function() {
				$('#thumb-vx').val(jcrop.thumb.width);
				$('#thumb-vy').val(jcrop.thumb.height);
			}
		}
		//初始化剪切图片方法
		jcrop.initJcrop = function(){
			var $preview = $(jcrop.perview);
			var $view = $.Jcrop(jcrop.view);
			$view.setOptions({
				onChange: jcrop.showPerview,
				onSelect: jcrop.showPreview,
				onRelease: jcrop.hidePreview,
				aspectRatio: jcrop.thumb.width / jcrop.thumb.height
			}); 
			
			jcrop.resize();
			return $view;
		}
		//重置图片大小
		jcrop.resize = function() {
			//设置图片大小
			jcrop.size.width = $(jcrop.view).width();
			jcrop.size.height = $(jcrop.view).height();
		}
		//清除选择图片
		jcrop.clear = function() {
			if ($view != null) {
				//清除剪切
			 	$view.destroy();
				$view = null;
				//重置size
				$(jcrop.view).css({width:0, height:0}).attr({'src':''});
				jcrop.url = '';
			}
		}
		//展示选定图片区域
		jcrop.showPerview = function(coords) {
			if (parseInt(coords.w) > 0) {
				//计算缩小比例
				var rx = jcrop.thumb.width / coords.w;
				var ry = jcrop.thumb.height / coords.h;
				//设置坐标
				jcrop.corrd = {x:coords.x, y:coords.y, w:coords.w, h:coords.h};

				$(jcrop.preview).css({
					//根据比例重画图片
					width : Math.round(rx * jcrop.size.width) + 'px',
					height : Math.round(ry * jcrop.size.height) + 'px',
					marginLeft : '-' + Math.round(rx * coords.x) + 'px',
					marginTop : '-' + Math.round(ry * coords.y) + 'px'
				}).show();
			}
		}
		//隐藏缩略图
		jcrop.hidePreview = function() {
			$(jcrop.preview).stop().fadeOut('fast');
		}
		
	    //选择图片按钮
		$("input:text[actkey='thumb']").click(function() {
			
			var actval = $(this).attr('actval');
			$div = $('#' + actval);
			
			//清除之前的jcrop
			if ($view != null) {
				//清除剪切
			 	$view.destroy();
				$view = null;
				//重置size
				$(jcrop.view).css({width:0, height:0}).attr({'src':''});
				jcrop.url = '';
			}
			//清除预览图片
			if ($preview != null) {
				$preview.attr('src', '[@c.url value="${(article.titleImg)!''}"/]');
			}

	    	//由joiner.js的回调函数自动调用
		    window.KCFinder = {
		        callBack: function(url) {
		            $("input:text[actkey='thumb']").val(url);
		            //设置预览图片
		            var _$image = $(jcrop.view);
		            var _$preview = $(jcrop.preview);
		            var img = new Image();
					//设置图片地址
					jcrop.url = url;
					img.src = jcrop.base + jcrop.url;
					_$image.width = img.width;
					_$image.height = img.height;
					_$image.attr({'src': img.src}).show();
		            //
		            _$preview.attr('src', img.src);
		            $div.css({display:'none'});
			        $div.html('');
			        window.KCFinder = null;
			       	jcrop.resize();
			        if (jcrop.auto) {
			        	//生成剪切
			        	$view = jcrop.initJcrop();
			        }
		        }
		    };
		    
		    $div.append('<iframe name="kcfinder2_iframe" src="[@c.url value="/kcfinder/browse.kc?act=show&type=images&dir=public"/]" ' +
	        'frameborder="0" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no" />');
	    	$div.css({display:'block'}).show();
		});
		
		$('#cutImage').click(function(){
			if (jcrop.url == '') {
				alert('请选择图片');
				return false;
			}
			//取得坐标和size
			var x = jcrop.corrd.x;
			var y = jcrop.corrd.y;
			var w = jcrop.corrd.w;
			var h = jcrop.corrd.h;
			//缩略图size
			var rw= jcrop.thumb.width;
			var rh= jcrop.thumb.height;
			//没有设置地址
			if (jcrop.url == '') {
				return;
			}
			var dir = jcrop.url
			var p = {'crop.dir': dir, 'crop.x':x, 'crop.y':y, 'crop.w':w, 'crop.h':h, 'crop.rw':rw, 'crop.rh':rh};
			var url = "[@c.url value='/common/crop.action'/]";
			$.post(url, p, function(e){
				var crop = e.crop;
				if (crop.status == "success") {
					$('#titleImg').attr('src', jcrop.base + "/" + crop.out);
					$('#titleImgHidden').val(jcrop.base + "/" + crop.out);
				} else {
					alert("error");
				}
				
			}, "json");
		});
		
		$('#clearImage').click(function() {
			jcrop.clear();
		})
		//剪切图片
		var $div,
			$view = null,
			$preview = null;
			jcrop.init();
	});
	</script>
</head>
<body id="body" class="art_content">
	[#include "/WEB-INF/pages/manage/_article-success.ftl"]
</body>
</html>